<template>

    <div>
        <div>
            <div id="ch" v-show="true">
                <van-cell-group inset>
                    <van-field
                            v-model="yonghu"
                            center
                            clearable

                            placeholder="请输入要查询的用户姓名"
                    >
                        <template #button>
                            <van-button @click="chaxun()" size="small" type="primary">搜索</van-button>
                        </template>
                    </van-field>
                </van-cell-group>
            </div>
        </div>

        <div>
            <div id="tui">
                <van-icon @click="fanhui()" name="arrow-left" />
            </div>
        </div>

        <div id="jkl">
            <div v-for="u in zs" v-show="true">
                <div>
                    <van-swipe-cell>
                        <van-cell :border="false" :icon="u.imgurl" :title="u.user"  />
                        <template #right>
                            <van-button square type="danger" :text="jieguo" @click="gaibian()" />
                        </template>
                    </van-swipe-cell>
                </div>
                <div>
                    <video  :src="u.url" style="width: 400px;height: 300px" controls loop v-show="true"></video>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { Toast } from 'vant';
    export default {

        name: "search",
        data() {
            return {
                yonghu: "",
                jieguo:"",
                zs:[],
                users:"",
                img:"",
                gzid:0
            }
        },
        methods: {
            fanhui() {
                history.back();
            },
            chaxun() {
                var that=this
                this.axios.post('http://localhost:8081/api/exit.do', {
                        gzuser: that.yonghu
                })
                    .then(function (response) {
                        if (response.data.code==400){
                            that.jieguo="关注"

                        }else {
                            that.jieguo="取消关注"
                            that.gzid=response.data.data.id
                        }
                    })

                this.axios.post("http://localhost:8081/api/sousuo.do",{
                    "user":that.yonghu
                })
                    .then(function (res) {
                        if (res.data.code==200){
                            that.zs=res.data.data
                            that.img=res.data.data.imgurl[0]
                        }
                    })
            },
            gaibian(){
                var that = this
                if (this.jieguo=="关注"){

                    this.axios.post("http://localhost:8081/api/charu.do",{
                        "gzuser":that.yonghu,
                        "gzimg":that.img
                    })
                        .then(function (res) {
                            if (res.data.code==200){
                                Toast("关注成功")
                            }
                        })
                }else {
                    this.axios.post("http://localhost:8081/api/gzdelect.do",{
                        "id":that.gzid
                    })
                        .then(function (res) {
                            if (res.data.code==200){
                                Toast("取消关注")
                            }
                        })
                }
            }
        }
    }
</script>

<style scoped>

    #ch{
        position: absolute;
        top: 0;
        width: 300px;
        right: 0px;
    }
    #tui{
        position: absolute;
        top: 20px;
        left: 10px;
    }
    #jkl{
        position: absolute;
        top: 50px;
    }
</style>